html {
    background-color: black;
    color: white;
}


#app_header {
    width: 90%;
    height: 10%;
    /*border: solid 4px blueviolet;*/ /*debug only*/
}

.header_title {
    padding-left: 20px;
    padding-top: 5px;
}

.footer_title {
    padding-left: 20px;
    padding-top: 0px;
}

.main_header_title {
    padding-left: 20px;
    padding-top: 25px;
}

#app_header_title {
    padding-left: 20px;
}

#app_center {
    width: 90%;
    height: 75%;
    /*border: solid 4px green;*/ /*debug only*/
}

.app_center_ws_config {
    /*border: solid 2px blue;*/ /*debug only*/
    height: 100%;
}

.app_center_ws_logs {
    /*border: solid 2px brown;*/ /*debug only*/
    height: 100%;
}

.btn_open {
    background: rgb(100, 184, 65); /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.btn_close {
    background: rgb(255, 164, 80); /* this is an orange */
}

.btn_ping {
    background: rgb(66, 184, 221); /* this is a light blue */
}

.payload_area {
    height: 63%;
    resize: none;
    overflow-y: auto;
}


.logs_area {
    margin-left: 10px;
    width: 80%;
    height: 71%;
    resize: none;
    overflow-y: auto;
}

#app_footer {
    width: 90%;
    height: 10%;
    /*border: solid 4px orange;*/ /*debug only*/
}
